<template>
    <div class="app-container">
        <el-row>
            <el-col :span="4">
                <div class="grid-content bg-purple-dark">
                    <el-tree ref="tree2" :data="data2" :props="defaultProps" :filter-node-method="filterNode"
                        class="filter-tree" default-expand-all />
                </div>
            </el-col>
            <el-col :span="20">
                <div class="grid-content bg-purple-dark">
                    <el-button type="primary" @click="handleAdd()">新增</el-button>

                    <el-table :data="itemList" style="width: 100%; margin-bottom: 20px" row-key="id" border
                        default-expand-all :tree-props="{ children: 'children' }">
                        <el-table-column prop="id" label="id" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="itemCode" label="物料编码" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="itemName" label="物料名称" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="measureCode" label="计量单位" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="itemTypeName" label="分类名称" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="itemOrProduct" label="物料/产品" sortable width="180">
                        </el-table-column>
                        <el-table-column prop="enableFlag" label="启用状态" sortable width="180">
                        </el-table-column>
                        <!-- <el-table-column prop="id" label="id" sortable width="180">
           </el-table-column> -->
                        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>

                </div>
            </el-col>
        </el-row>

        <el-dialog title="新增物料" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="物料编码" :label-width="formLabelWidth">
                    <el-input v-model="form.itemCode" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物料名称" :label-width="formLabelWidth">
                    <el-input v-model="form.itemName" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="规格" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.specification" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="单位" :label-width="formLabelWidth">
                    <el-select v-model="form.unitId" placeholder="请选择">
                        <el-option v-for="item in units" :key="item.id" :label="item.measureName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="父分类名称" :label-width="formLabelWidth">
                    <!-- :show-all-levels="false" 只显示最后一级的内容
                        :props="{emitPath:false}" 选中的数据的value只获取最后一级
                    -->
                    <el-cascader v-model="form.itemTypeId" :options="treeList" @change="handleChange"
                        :show-all-levels="false" :props="{ emitPath: false }"></el-cascader>
                </el-form-item>

                <el-form-item label="启用状态" :label-width="formLabelWidth">
                    <el-radio v-model="form.enableFlag" :label="1">是</el-radio>
                    <el-radio v-model="form.enableFlag" :label="0">否</el-radio>
                </el-form-item>

                <el-form-item label="是否安全库存" :label-width="formLabelWidth">
                    <el-radio v-model="form.safeStockFlag" :label="1">是</el-radio>
                    <el-radio v-model="form.safeStockFlag" :label="0">否</el-radio>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addItem()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import { listTypeTreeVO } from "@/api/type";
import { unitList } from "@/api/unit";
import { addItem, listItemVO } from "@/api/item";

export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            formLabelWidth: "100px",
            itemList: [],
            listLoading: true,
            dialogFormVisible: false,
            dialogUpdateVisible: false,
            form: {
                itemCode: '',
                itemName: '',
                itemOrProduct: 'PRODUCT',
                enableFlag: 1,
                safeStockFlag: 0,
                itemTypeId: 0,
                specification: "",
                unitId: ''

            },
            units: [],
            treeList: [],
            currentPage: 1,
            total: 0,
            pageSize: 5,
            data2: [{
                id: 1,
                label: 'Level one 1',
                children: [{
                    id: 4,
                    label: 'Level two 1-1',
                    children: [{
                        id: 9,
                        label: 'Level three 1-1-1'
                    }, {
                        id: 10,
                        label: 'Level three 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: 'Level one 2',
                children: [{
                    id: 5,
                    label: 'Level two 2-1'
                }, {
                    id: 6,
                    label: 'Level two 2-2'
                }]
            }, {
                id: 3,
                label: 'Level one 3',
                children: [{
                    id: 7,
                    label: 'Level two 3-1'
                }, {
                    id: 8,
                    label: 'Level two 3-2'
                }]
            }]
        }
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            this.listLoading = true;
            listItemVO({ pageNum: this.currentPage, pageSize: this.pageSize }).then((response) => {
                this.itemList = response.data.dataList;
                this.total = response.data.total
                this.listLoading = false;
            });
        },
        handleAdd() {
            unitList().then(res => {
                this.units = res.data
                // 读取分类信息，作为新增数据的父分类
                listTypeTreeVO().then((response) => {
                    this.treeList = response.data
                    this.dialogFormVisible = true;
                });
            })
            // console.log(index, row);


        },
        handleChange(value) {
            console.log(value);
            console.log(this.form.itemTypeId)
        },
        // 添加分类
        addItem() {
            addItem(this.form).then((response) => {
                if (response.code == 200) {
                    this.dialogFormVisible = false;
                    this.fetchData();
                }
            });
        },
        handleDelete(index, row) {
            // console.log(index, row);
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    deleteType(row.id).then((response) => {
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                        this.fetchData();
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        handleEdit(index, row) {
            console.log(index, row);
            // unitInfo(row.id).then((response) => {
            //     this.form = response.data;
            //     this.dialogUpdateVisible = true;
            // });
        },
    },
};
</script>
